<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom )+'px'}">
		<template v-if="type==1 || type==2">
			<navbar :isBack="false">
				<view class="toggle">
					<view class="toggle-li" :class="{'active':active==0}" @click="toggleChange(0)">
						<text>全部</text>
					</view>
					<view class="toggle-li" :class="{'active':active==1}" @click="toggleChange(1)">
						<uni-badge class="uni-badge-left-margin" is-dot :text="notReadNum" absolute="rightTop"
							size="normal" :offset="[0,12]">
							<text>未读</text>
						</uni-badge>
					</view>
					<view class="toggle-li" :class="{'active':active==2}" @click="toggleChange(2)">
						<text>系统消息</text>
					</view>
				</view>
			</navbar>
			<view class="content" :style="{paddingTop:(getStateHeight + getNavbar + toggleHeight  ) + 'px'}">
				<view class="item-box" v-if="dataList.length > 0">
					<template v-for="(item,index) in dataList">
						<delSlideLeft :item="item" :data_transit="{index:index,item:item}" @delItem="delItem"
							@leftMove="leftMove">
							<view class="item" :key="item.id" @click="toMessage(item)">
								<view class="item-picdir">
									<uni-badge class="uni-badge-left-margin" :text="item.notReadNum" absolute="rightTop"
										size="normal" v-if="active!=2 && item.type!=2">
										<image :src="baseImage + item.avatar" mode="" v-if="item.avatar"></image>
										<image :src="baseImage + usual.companyLogo" mode="" v-else-if="type==2"></image>
										<image :src="baseImage + usual.seekerAvatar1" mode="" v-else></image>
									</uni-badge>
									<uni-badge class="uni-badge-left-margin" :text="item.notReadNum" absolute="rightTop"
										size="normal" v-else>
										<image :src="imgUrl + 'systemMessageIcon.png'" mode=""></image>
									</uni-badge>
								</view>
								<view class="item-data">
									<view class="item-line">
										<view class="item-data-name">
											{{item.gangwei?"["+item.gangwei+"]":""}} {{item.name || item.title}}
										</view>
										<view class="item-data-date" v-if="item.time">
											{{item.time.split(" ")[0]}}
										</view>
									</view>
									<view class="item-data-content">
										{{(item.cnt || item.shorts) || ""}}
									</view>
								</view>
							</view>
						</delSlideLeft>
						<!-- <view class="item" :key="item.id" @click="toMessage(item)" v-else>
							<view class="item-picdir">
								<uni-badge class="uni-badge-left-margin" :text="item.notReadNum" absolute="rightTop"
									size="normal" v-if="active!=2 && item.type!=2">
									<image :src="baseImage + item.avatar" mode="" v-if="item.avatar"></image>
									<image :src="baseImage + usual.companyLogo" mode="" v-else></image>
								</uni-badge>
								<image :src="imgUrl + 'systemMessageIcon.png'" mode="" v-else></image>
							</view>
							<view class="item-data">
								<view class="item-line">
									<view class="item-data-name">
										{{item.gangwei?"["+item.gangwei+"]":""}} {{item.name || item.title}}
									</view>
									<view class="item-data-date" v-if="item.time">
										{{item.time.split(" ")[0]}}
									</view>
								</view>
								<view class="item-data-content">
									{{(item.cnt || item.shorts) || ""}}
								</view>
							</view>
						</view> -->
					</template>
				</view>
				<empty v-else></empty>
			</view>
		</template>
		<LoginEmpty v-else></LoginEmpty>
		<Tabber currentPagePath="message"></Tabber>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import Tabber from "@/pages/common/Tabber.vue"
	import delSlideLeft from '@/components/ay-operate/del_slideLeft.vue'
	import LoginEmpty from "@/components/loginEmpty.vue"
	import {
		messageListCompany,
		unreadMessageListCompany,
		systemMessageListCompany,
		messageListSeeker,
		unreadMessageListSeeker,
		systemMessageListSeeker,
		qiyeRemoveMessage,
		qiuzhiRemoveMessage,
		noticeRemoveMessage,
	} from "@/core/web-api/session.js"
	import {
		getNotReadNum
	} from "@/core/web-api/common.js"
	import Empty from "@/components/Empty.vue"
	export default {
		components: {
			Navbar,
			Tabber,
			Empty,
			delSlideLeft,LoginEmpty
		},
		data() {
			return {
				value: 1,
				active: 0,
				dataList: [],
				bottomBtnHeight: uni.upx2px(90),
				toggleHeight: uni.upx2px(110),
				page: {
					current: 1,
					limit: 10,
				},
				notReadNum: 0,
				move: {},
			}
		},
		methods: {
			leftMove(e) {
				if (e.id == this.move.id) return;
				this.move = e;
				this.dataList.forEach(item => {
					if (e.id != item.id) {
						item.txtStyle = "left:0";
					}
				})
				let index = this.dataList.findIndex(f => f.id == e.id)
				this.dataList[index].txtStyle = e.txtStyle
			},

			delItem({
				item
			}) {
				console.log(item)
				let promise = null;
				if(item.type=='1'){
					if (this.type == '1') {
						promise = qiyeRemoveMessage({
							id: item.id
						})
					} else if (this.type == '2') {
						promise = qiuzhiRemoveMessage({
							id: item.id
						})
					}
				}else if(item.type=='2'){
					promise = noticeRemoveMessage({
						id: item.id
					})
				}
				
				promise.then(res => {
					if (res.code == 20000) {
						this.page.current = 1;
						this.getDataList();
					}
				})
			},

			/**
			 * 跳转消息详情/系统详情
			 * @param {Object} item
			 */
			toMessage(item) {

				if (this.active == 2) return;
				if (item.type == 2) return;
				uni.navigateTo({
					url: "/pages/web/message/communication?id=" + item.id
				})
			},

			toggleChange(num) {
				this.active = num;
				this.page.current = 1;
				this.getDataList();
			},

			/**
			 * 加载列表
			 */
			getDataList() {
				let promise = null;
				if (this.active == 0) {

					promise = this.type == 1 ? messageListCompany(this.page) : messageListSeeker(this.page);
				} else if (this.active == 1) {
					promise = this.type == 1 ? unreadMessageListCompany(this.page) : unreadMessageListSeeker(this.page)
				} else if (this.active == 2) {
					promise = this.type == 1 ? systemMessageListCompany(this.page) : systemMessageListSeeker(this.page)
				}
				promise.then(res => {
					if (res.code == 20000) {
						const list = res.data.list;
						
						if (!list) {
							this.dataList = [];
							return
						}else{
							list.forEach(item => {
								item.txtStyle = "left:0"
								if(this.active==2){
									item.type='2'
								}
							})
						};
						if (this.page.current == 1) {
							this.dataList = list || [];
						} else {
							this.dataList.push(...list)
						}
						this.total = res.data.total;
					}
				})
			},

			/**
			 * 加载分页数据
			 */
			pageDataList() {
				if (this.total == this.dataList.length) return;
				this.page.current++;
			},

			getNUmber() {
				getNotReadNum().then(res => {
					if (res.code == 20000) {
						this.notReadNum = res.data.num
					}
				})
			},
		},
		onReachBottom() {
			this.pageDataList()
		},
		onShow() {
			this.page.current = 1;
			this.getDataList()
			this.getNUmber();
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['baseImage', 'imgUrl', 'type', 'isMessage','usual'])
		},
		watch: {
			isMessage: {
				immediate: true,
				handler(val) {
					if (!val) return;
					this.$store.commit("setIsMessage", false)
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.main {
		width: 100%;
		box-sizing: border-box;


		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}
	}

	.toggle {
		display: flex;
		height: 72upx;
		margin-left: 30upx;
		padding-bottom: 20upx;
		padding-top: 18upx;

		view {
			width: 231upx;
			text-align: center;
			line-height: 72upx;
			background-color: #fff;
			border-right: 2upx solid #eee;
			box-sizing: border-box;

			&:nth-child(1) {
				border-radius: 10upx 0 0 10upx;
			}

			&:nth-child(3) {
				border-radius: 0 10upx 10upx 0;
			}

			&:last-child {
				border-right: 0;
			}

			font-size: 26upx;
			color: #666666;

			&.active {
				color: #fff;
				background: linear-gradient(to left, #6fabfd, #5371fd);
			}
		}
	}

	.item {
		&-box {
			width: 100%;
			margin-top: 36upx;
			position: static;
			z-index: 2;
			box-sizing: border-box;

			/deep/ .box-slideLeft {
				margin-bottom: 0upx;
			}

		}

		width: 100%;
		padding:40upx 0upx 30upx;
		box-sizing: border-box;
		padding-left: 30upx;
		padding-right: 30upx;
		border-bottom: 2upx solid #eee;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius:10upx;

		&:last-child {
			// border-bottom: 0;
		}

		&-picdir {
			width: 77upx;
			height: 77upx;
			border-radius: 50%;
			border: 2upx solid #b6afac;

			image {
				width: 77upx;
				height: 77upx;
				border-radius: 50%;
			}
		}

		&-data {
			width: 500upx;
			flex: 1;
			margin-left: 20upx;

			&-name {
				font-size: 30upx;
				color: #000000;
				padding-right: 20upx;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;
				flex: 1;
			}

			&-date {
				font-size: 26upx;
				color: #999999;
			}

			&-content {
				max-width: 100%;
				margin-top: 10upx;
				font-size: 26upx;
				color: #999;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;

			}
		}

		&-line {
			display: flex;
		}
	}
</style>
